<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" :width="width" :height="height" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
import { queryConsumeChartForDay } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  chartvalue: {
    type: Object,
    default: () => {}
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  series: []
});
const { option, series } = toRefs(state);
const getoptions = () => {
  if (props.chartvalue != null) {
    isShowEcharts.value = true;
    series.value = [
      {
        data: props.chartvalue.yaxis.filter(item => item.name == "实际消耗")[0]?.value
          ? props.chartvalue.yaxis.filter(item => item.name == "实际消耗")[0]?.value
          : [],
        type: "line",
        name: "实际消耗",
        emphasis: {
          focus: "series"
        }
      },
      {
        data: props.chartvalue.yaxis.filter(item => item.name == "配额")[0]?.value
          ? props.chartvalue.yaxis.filter(item => item.name == "配额")[0]?.value
          : [],
        type: "line",
        name: "配额",
        emphasis: {
          focus: "series"
        }
      },
      {
        data: props.chartvalue.yaxis.filter(item => item.name == "预测配额")[0]?.value
          ? props.chartvalue.yaxis.filter(item => item.name == "预测配额")[0]?.value
          : [],
        type: "line",
        name: "预测配额",
        emphasis: {
          focus: "series"
        }
      }
    ];

    option.value = {
      // color: ["#39C670 ", "#3B82F6", "#28D892", "#FF5639"],
      grid: {
        left: "20px",
        top: "50px",
        right: "10px",
        bottom: "10px",
        containLabel: true
      },
      legend: {
        type: "scroll",
        width: "70%"
      },
      tooltip: {
        confine: true,
        trigger: "axis"
      },
      xAxis: {
        type: "category",
        boundarGap: false,
        // data: response.xaxis
        data: props.chartvalue.xaxis,
        axisLabel: {
          interval: 0,
          rotate: 45
        }
      },
      yAxis: {
        name: "tCO2e",
        type: "value"
      },
      series: series.value
    };
  } else {
    isShowEcharts.value = false;
  }
};
watch(
  () => props.chartvalue,
  newOption => {
    console.log(newOption);
    getoptions();
  }
);
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
